<script setup>
import {} from "vue";
import { useCookieStore } from "@/stores";
const cookieStore = useCookieStore();

const props = defineProps({
  list: {
    type: Object,
  },
});

const onPlayList = (id) => {
  if (!cookieStore.cookie.cookie)
    return uni.showToast({ title: "请登录", icon: "none" });
  uni.navigateTo({ url: `/pages/musicList/musicList?id=${id}` });
};

const onAllPlay = (e, id) => {
  if (!cookieStore.cookie.cookie)
    return uni.showToast({ title: "请登录", icon: "none" });
  uni.showToast({ title: "该功能正在开发中", icon: "none" });
};
</script>

<template>
  <view class="my-collect-list-wrap">
    <view class="my-collect-list" @tap="onPlayList(list.id)">
      <image
        :src="list.coverImgUrl + '?param=200y200'"
        mode="aspectFit"
        class="list-img"
      />
      <view class="list-info">
        <view class="list-name">我喜欢的音乐</view>
        <view class="list-count"> {{ list.trackCount || 0 }}首 </view>
      </view>
      <view class="allPlay-btn" @tap.stop="onAllPlay($event, list.id)"> 全部播放 </view>
    </view>
  </view>
</template>

<style lang="scss">
.my-collect-list-wrap {
  padding: 0 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  .my-collect-list {
    font-size: 30rpx;
    position: relative;
    margin: 20rpx 0;
    height: 100rpx;
    display: flex;
    align-items: center;
    .list-img {
      height: 100rpx;
      width: 100rpx;
      background-color: rgb(229, 229, 229);
      border-radius: 20rpx;
    }
    .list-info {
      margin-left: 20rpx;
      .list-name {
        line-height: 50rpx;
      }
      .list-count {
        display: flex;
        font-size: 24rpx;
        color: $assistText;
        line-height: 40rpx;
      }
    }
    .allPlay-btn {
      position: absolute;
      right: 0;
      width: 130rpx;
      font-size: 24rpx;
      line-height: 44rpx;
      text-align: center;
      border-radius: 40rpx;
      border: $primaryColor 2rpx solid;
    }
  }
}
</style>
